<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>触摸事件</title>
	<style>
	body{
		margin:0;
		padding:0;
	}
		.box{
			width:200px;
			height:200px;
			background:pink;
			float:left;	
		}
	</style>
</head>

<body>
<!--
/*触摸事件touch*/
/*解释touch
    1.touch是移动端的触摸属性  而且是一组事件
    2.touchstart	当手指触摸屏幕的时候触发
    3.touchmove		当手指在屏幕中来回的滑动时候触发
    4.touchend		当手指离开屏幕的时候触发
    5.touchcancel	当被迫终止滑动的时候触发（如来电  弹消息）
    主要是前三个
    6.利用touch相关事件实现移动端常见滑动效果和移动端常见的手势事件 	
*/
/*使用touch
	1.绑定事件:
    	box.addEventListener('touchstart',function(){});
    2.事件对象：（以下三个为移动端独有）
   	 名字:TouchList-------触摸点（一个手指触摸就是一个触摸点，和屏幕的接触点的个数）的集合
   	 changedTouches	改变后的触摸点集合
   	 targetTouches	当前元素的触摸点集合
     touches		页面上所有触摸点集合
    3.触摸点集合在每个事件触发的时候会不会去记录触摸
      changedTouches	每个事件都会记录
   	  targetTouches  touches  在离开屏幕的时候无法记录触摸点
    4.分析滑动实现的原理：
      4.1让触摸的元素随着手指的滑动做位置的改变 
      4.2位置的改变，需要当前手指的坐标
      4.3在每一个触摸点中会记录当前触摸点的坐标 e.touches[0] 第一个触摸点
      4.4 clientX  clientY  基于浏览器窗口（基于视口）
      4.5 pageX    pageY    基于页面（视口）
      4.6 screenX  screenY  基于屏幕
*/
-->
<div class="box"></div>
<script>
	window.onload = function(){
		var box	= document.querySelector('.box');
		box.addEventListener('touchstart', function(e) {
			console.log('start');
			console.log(e.touches[0]);
			console.log(e.touches[0].clientX,e.touches[0].clientY);
			console.log(e.touches[0].pageX,e.touches[0].pageY);
			console.log(e.touches[0].screenX,e.touches[0].screenY);
		});
		box.addEventListener('touchmove', function(e) {
			console.log('move');
			console.log(e);
		});
		box.addEventListener('touchend', function(e) {
			console.log('end');
			console.log(e);
		});
		/*box.addEventListener('click', function(e) {
			console.log('click');
			console.log(e);
		});*/
	}
</script>
</body>
</html>
